<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <p>EventBus</p>
        <div>
            <p>4</p>
            <p>2</p>
            <p>3</p>
            <p>5</p>
            <p>7</p>
            <p>6</p>
        </div>
        <script>
            console.log('start');
            setTimeout(() => {
                console.log('children2');
                Promise.resolve().then(() => {
                    console.log('children3');
                });
            }, 0);

            new Promise(function (resolve, reject) {
                console.log('children4');
                setTimeout(() => {
                    console.log('children5');
                    resolve('children6');
                }, 0);
            }).then((res) => {
                console.log('children7');
                setTimeout(() => {
                    console.log(res);
                }, 0);
            });
        </script>
    </body>
</html>
